<template>
  <div class="discover-wrapper">
    <header>
      <p>发现</p>
    </header>
    <!-- 商家列表部分 -->
    <ul class="business-list">
      <li v-for="business in businesses" :key="business.id" @click="goToBusiness(business.id)">
        <img :src="business.img" alt="商家图片" />
        <div class="business-info">
          <div class="business-info-h">
            <h3>{{ business.name }}</h3>
            <div class="business-info-like">&#8226;</div>
          </div>
          <div class="business-info-star">
            <div class="business-info-star-left">
              <i class="fa fa-star" v-for="n in 5" :key="n"></i>
              <p>{{ business.rating }} 月售{{ business.monthlySales }}单</p>
            </div>
            <div class="business-info-star-right">{{ business.deliveryService }}</div>
          </div>
          <div class="business-info-delivery">
            <p>&#165;{{ business.minimumOrder }}起送 | &#165;{{ business.deliveryFee }}配送</p>
            <p>{{ business.distance }}km | {{ business.deliveryTime }}分钟</p>
          </div>
          <div class="business-info-explain">
            <div>{{ business.specialty }}</div>
          </div>
          <div class="business-info-promotion" v-if="business.promotions.length">
            <div class="business-info-promotion-left" v-for="(promo, index) in business.promotions" :key="index">
              <div class="business-info-promotion-left-incon">{{ promo.label }}</div>
              <p>{{ promo.description }}</p>
            </div>
            <div class="business-info-promotion-right">
              <p>{{ business.promotions.length }}个活动</p>
              <i class="fa fa-caret-down"></i>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "Find",
  data() {
    return {
      businesses: [
        {
          id: 1,
          img: '../assets/sj01.png',
          name: '万家饺子（软件园E18店）',
          rating: 4.9,
          monthlySales: 345,
          deliveryService: '蜂鸟专送',
          minimumOrder: 15,
          deliveryFee: 3,
          distance: 3.22,
          deliveryTime: 30,
          specialty: '各种饺子',
          promotions: [
            { label: '新', description: '饿了么新用户首单立减9元' },
            { label: '特', description: '特价商品5元起' }
          ]
        },
        // ...更多商家数据
      ],
    };
  },
  methods: {
    goToBusiness(businessId) {
      this.$router.push({ name: 'BusinessInfo', params: { businessId } });
    },
  },
};
</script>

<style scoped>
.discover-wrapper {
  padding: 20px;
}
.discover-wrapper header {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
}
.business-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.business-list li {
  width: 45%; /* 根据需要调整 */
  margin: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}
.business-list li img {
  width: 100%;
  height: auto;
  display: block;
}
.business-info {
  padding: 10px;
}
.business-info-h {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.business-info-like {
  width: 1.6vw;
  height: 3.4vw;
  background-color: #666;
  color: #fff;
  font-size: 4vw;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}
.business-info-star {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 5px;
}
.business-info-star-left {
  display: flex;
  align-items: center;
}
.fa-star {
  color: #fec80e;
  margin-right: 5px;
}
.business-info-star-right {
  background-color: #0097ff;
  color: #fff;
  font-size: 14px;
  border-radius: 2px;
  padding: 2px 6px;
}
.business-info-delivery {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 5px;
  font-size: 14px;
  color: #666;
}
.business-info-explain {
  margin-top: 5px;
  font-size: 14px;
  color: #666;
}
.business-info-promotion {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 5px;
}
.business-info-promotion-left-incon {
  width: 4vw;
  height: 4vw;
  background-color: #70bc46;
  color: #fff;
  font-size: 3vw;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 3px;
  margin-right: 5px;
}
.business-info-promotion-right {
  font-size: 14px;
  color: #999;
}
.fa-caret-down {
  margin-left: 5px;
}
</style>